<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="UTF-8">
		<title>信封</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style type="text/css">*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}
		body {padding:0;margin:0;overflow:hidden;background-image:url(https://cv-senior-engineer.gitee.io/pleasantly-surprised/images/index.png);background-position: center center;background-repeat: no-repeat;background-size: cover;}.fixed{position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);}

		.form-demo{position: relative;width: 400px;height: 600px;}.bt{text-align:center;}
		.switch{background:rgba(255,192,203,0.4);box-shadow:5px 5px 1px rgba(255,192,203,0.5);border-radius: 25px;width: 100%;height: 140px;position: absolute;left: 0;bottom: 0;border-radius: 8px;text-align: center;}
		#change:checked+label, 
		#change:not(:checked)+label{background:rgba(255,192,203,1);border-radius: 25px;color: white;width: 280px;padding: 8px 0;font-size: 24px;font-weight: 600;position: absolute;bottom: 22px;left: 50%;transform: translate(-50%);border-radius: 8px;cursor: pointer;text-align: center;}.turn{width: 100%;height: 400px;position: absolute;top: 0;perspective: 800px;}
		.over{width: 100%;height: 100%;transform-style: preserve-3d;transition: all 2s ease;}#change:checked ~ .turn .over{transform: rotateY(180deg);}.sign{transform: rotateY(180deg);}.login input:nth-child(-n+3){margin: 20px 0;}.btn{background:rgba(255,192,203,1);box-shadow:5px 5px 5px rgba(255,192,203,0.5);border: none;width: 280px;font-size: 24px;font-weight: 600;padding: 6px 0;color: white;border-radius: 8px;margin-top: 15px;cursor: pointer;}h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {font-family: inherit;font-weight: 500;line-height: 1.1;color: inherit;}h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small {font-weight: 400;line-height: 1;color: #777777;}h1, .h1, h2, .h2, h3, .h3 {margin-top: 20px;margin-bottom: 10px;}h1 small, .h1 small, h2 small, .h2 small, h3 small, .h3 small, h1 .small, .h1 .small, h2 .small, .h2 .small, h3 .small, .h3 .small {font-size: 65%;}h4, .h4, h5, .h5, h6, .h6 {margin-top: 10px;margin-bottom: 10px;}h4 small, .h4 small, h5 small, .h5 small, h6 small, .h6 small, h4 .small, .h4 .small, h5 .small, .h5 .small, h6 .small, .h6 .small {font-size: 75%;}h1{margin-top: 38px;transform-style: preserve-3d;transform: translate3d(0, 0, 1px);}h1, .h1 {font-size: 36px;}h2, .h2 {font-size: 30px;}h3, .h3 {font-size: 24px;}h4, .h4 {font-size: 18px;}h5, .h5 {font-size: 14px;}h6, .h6 {font-size: 12px;}p {margin: 0 0 10px;}form{position: absolute;background-color: #FCFBFA;height: 100%;border-radius: 8px;transform-style: preserve-3d;text-align: center;}input{background-color: #4E495D;width: 70%;height: 48px;border-radius: 8px;margin-bottom: 20px;padding: 0 16px;font-size: 18px;color: #c4c3ca;font-weight: 500;outline: none;border: none;box-shadow: 0 4px 8px 0 rgba(78, 73, 79, .5);transform-style: preserve-3d;transform: translate3d(0, 0, 1px);}</style>
	</head>
	<body>
		<div class="fixed">
			<div class="bt">
				<div class="form-demo">
					<!--<div class="switch">
						<h2>是否拥有账号？</h2>
					</div>
					<input type="checkbox" style="display: none;" id="change">
					<label for="change">切 换</label>-->

					<div class="turn">
						<div class="over">
							<form action="http://cv-senior-engineer.gitee.io/the-first-personal-websites/" class="login">
								<h1>登 录</h1>
								<input type="text" placeholder="用户名">
								<input type="password" placeholder="密码" id="gm_pass" required>
								<input type="submit" class="btn" value="信封">
							</form>
							<form action="" class="sign">
								<h1>注 册</h1>
								<input type="text" placeholder="用户名">
								<input type="password" placeholder="密码">
								<input type="password" placeholder="确认密码">
								<input type="submit" class="btn" value="注 册">
							</form>
						</div>
					</div>
				</div>
			</div>
			<div>
				<audio id="bgMusic" src="http://cv-senior-engineer.gitee.io/pleasantly-surprised/images/qlx.mp3" autoplay="autoplay" loop></audio>
			</div>
		</div>
        <script>
var text = document.getElementById("name1");
var password = document.getElementById("gm_pass")
            , confirm_password = document.getElementById("gm_confirm_pass");
        function validatePassword() {
				if(password.value !="20031211"){
                password.setCustomValidity("密码错误") 
			}				else{
					confirm_password.setCustomValidity('');
				}
		}
		        password.onchange = validatePassword;
        confirm_password.onkeyup = validatePassword;
		text = validatePassword;;
</script>
		<!- 背景部分 ->
		<canvas id="sakura" style="transform: rotateY(180deg);padding:0;margin:0;opacity:0.3;pointer-events: none;"></canvas>
    </form>
    <!--鼠标拖尾-->
<span class="js-cursor-container"></span>
    <script>
        (function fairyDustCursor() {
 
            var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
            var width = window.innerWidth;
            var height = window.innerHeight;
            var cursor = { x: width / 2, y: width / 2 };
            var particles = [];
 
            function init() {
                bindEvents();
                loop();
            }
 
            // Bind events that are needed
            function bindEvents() {
                document.addEventListener('mousemove', onMouseMove);
                window.addEventListener('resize', onWindowResize);
            }
 
            function onWindowResize(e) {
                width = window.innerWidth;
                height = window.innerHeight;
            }
 
            function onMouseMove(e) {
                cursor.x = e.clientX;
                cursor.y = e.clientY;
 
                addParticle(cursor.x, cursor.y, possibleColors[Math.floor(Math.random() * possibleColors.length)]);
            }
 
            function addParticle(x, y, color) {
                var particle = new Particle();
                particle.init(x, y, color);
                particles.push(particle);
            }
 
            function updateParticles() {
 
                // Updated
                for (var i = 0; i < particles.length; i++) {
                    particles[i].update();
                }
 
                // Remove dead particles
                for (var i = particles.length - 1; i >= 0; i--) {
                    if (particles[i].lifeSpan < 0) {
                        particles[i].die();
                        particles.splice(i, 1);
                    }
                }
 
            }
 
            function loop() {
                requestAnimationFrame(loop);
                updateParticles();
            }
 
            /**
             * Particles
             */
 
            function Particle() {
 
                this.character = "*";
                this.lifeSpan = 120; //ms
                this.initialStyles = {
                    "position": "fixed",
                    "display": "inline-block",
                    "top": "0px",
                    "left": "0px",
                    "pointerEvents": "none",
                    "touch-action": "none",
                    "z-index": "10000000",
                    "fontSize": "25px",
                    "will-change": "transform"
                };
 
                // Init, and set properties
                this.init = function (x, y, color) {
 
                    this.velocity = {
                        x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
                        y: 1
                    };
 
                    this.position = { x: x + 10, y: y + 10 };
                    this.initialStyles.color = color;
 
                    this.element = document.createElement('span');
                    this.element.innerHTML = this.character;
                    applyProperties(this.element, this.initialStyles);
                    this.update();
 
                    document.querySelector('.js-cursor-container').appendChild(this.element);
                };
 
                this.update = function () {
                    this.position.x += this.velocity.x;
                    this.position.y += this.velocity.y;
                    this.lifeSpan--;
 
                    this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px, 0) scale(" + (this.lifeSpan / 120) + ")";
                }
 
                this.die = function () {
                    this.element.parentNode.removeChild(this.element);
                }
 
            }
 
            /**
             * Utils
             */
 
            // Applies css `properties` to an element.
            function applyProperties(target, properties) {
                for (var key in properties) {
                    target.style[key] = properties[key];
                }
            }
 
            if (!('ontouchstart' in window || navigator.msMaxTouchPoints)) init();
        })();    
    </script>
<!--鼠标点击特效-->
    <script>
        (function () {
            var a_idx = 0;
            window.onclick = function (event) {
                var a = new Array("❤❤", "❤❤", "❤❤", "❤❤","❤❤","❤❤","❤❤","❤❤");
 
                var heart = document.createElement("b"); //创建b元素
                heart.onselectstart = new Function('event.returnValue=false'); //防止拖动
 
                document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
                a_idx = (a_idx + 1) % a.length;
                heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式
 
                var f = 16, // 字体大小
                    x = event.clientX - f / 2, // 横坐标
                    y = event.clientY - f, // 纵坐标
                    c = randomColor(), // 随机颜色
                    a = 1, // 透明度
                    s = 1.2; // 放大缩小
 
                var timer = setInterval(function () { //添加定时器
                    if (a <= 0) {
                        document.body.removeChild(heart);
                        clearInterval(timer);
                    } else {
                        heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
                            c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
                            s + ");";
 
                        y--;
                        a -= 0.016;
                        s += 0.002;
                    }
                }, 15)
 
            }
            // 随机颜色
            function randomColor() {
 
                return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
                .random() * 255)) + ")";
 
            }
        }());
    </script>
		<!- 粉丝要的JS 导入  ->
		<script src="mm1.js"></script>
</body>
</html>